<template>
        <div class="pdf-viewer">
        <template v-for="item in pageNum" :key="item">
          <canvas :id="`pdf-canvas-${item}`" class="pdf-page" />
        </template>
        <van-empty
          v-if="loadError"
          image="error"
          description="PDF加载出错了..."
        />
      </div>

</template>
<script setup lang="ts">
// 引入插件相关的参数
import * as pdfjs from 'pdfjs-dist';
import * as pdfjsWorker from "pdfjs-dist/build/pdf.worker.min.mjs";
pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker;

// html部分涉及的参数
const loadError = ref(false);
const detail = ref({});
// let pdfDoc = null; // 一定不能使用响应式的数据，会报错Cannot read from private field---pdf.js

const pdfDoc = "http://localhost:18888" + import.meta.env.BASE_URL + 'static/pdf/CM20240408.pdf'; // 修改为您的 PDF 文件的路径

const pageNum = ref(0);
// 处理接口返回的pdf的url
function getDetail() {
  baseInfoGet({ id: route.currentRoute.value.query.id }).then((res) => {
    detail.value = res.data;
    const url = safeJSONParse(res.data.fileUrl)?.[0].url || '';
    console.log('预览地址：', url);
    if (!url) return;
    loadingPdf(url);
  });
}
//加载pdf
function loadingPdf(url) {
  const loadingTask = pdfjs.getDocument(url);
  loadingTask.promise
    .then((pdf) => {
      pdfDoc = pdf;
      pageNum.value = pdf.numPages;
      nextTick(() => {
        renderPage();
      });
    })
    .catch(() => {
      loadError.value = true;
    });
}
// 渲染pdf
function renderPage(num = 1) {
  pdfDoc.getPage(num).then((page) => {
    const canvas = document.getElementById(`pdf-canvas-${num}`);
    const ctx = canvas.getContext('2d');
    const scale = 1.5;
    const viewport = page.getViewport({ scale });
    // 画布大小,默认值是width:300px,height:150px
    canvas.height = viewport.height;
    canvas.width = viewport.width;
    // 画布的dom大小, 设置移动端,宽度设置铺满整个屏幕
    const { clientWidth } = document.body;
    // 减去2rem使用因为我的页面左右加了padding
    canvas.style.width = `calc(${clientWidth}px - 2rem)`;
    // 根据pdf每页的宽高比例设置canvas的高度
    canvas.style.height = `${
      clientWidth * (viewport.height / viewport.width)
    }px`;
    canvas.height = viewport.height;
    canvas.width = viewport.width;
    page.render({
      canvasContext: ctx,
      viewport,
    });
    if (num < pageNum.value) {
      renderPage(num + 1);
    } else {
    }
  });
}




</script>
<style lang="css" scoped>
.pdf-preview {
  position: relative;
  height: 100vh;
  padding: 20px 0;
  box-sizing: border-box;
  background-color: e9e9e9;
}

.pdf-wrap {
  overflow-y: auto;
}

.vue-pdf-embed {
  text-align: center;
  /* width: 515px; */
  border: 1px solid #e5e5e5;
  margin: 0 auto;
  box-sizing: border-box;
}

.page-tool {
  position: absolute;
  bottom: 35px;
  padding-left: 15px;
  padding-right: 15px;
  display: flex;
  align-items: center;
  background: rgb(66, 66, 66);
  color: white;
  border-radius: 19px;
  z-index: 100;
  cursor: pointer;
  margin-left: 50%;
  transform: translateX(-50%);
}

.page-tool-item {
  padding: 8px 15px;
  padding-left: 10px;
  cursor: pointer;
}
</style>
